/* jsx ctrl+m*/
import React, {Component} from 'react';
import './css/index.css'
import axios from 'axios'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies:[]
    }

  }
  render() {
   var res =  this.state.movies.map(item=>{
      return (
      <div key={item.id} onClick={this.handleDelete.bind(this,item)}>
        {item.name}
      </div>
      )
    }
    )
    return(
      <div className="item">
         {res}
      </div>
    )
  }
  handleDelete=(val)=>{
    console.log(val)
    var index =this.state.movies.findIndex(item=>{
        return val=item
    })
    var movies=this.state.movies;
    movies.splice(index,1)
    this.setState({
      movies
    })
  }
  componentDidMount(){
    axios.get('http://122.112.161.135:3000/top/playlist').then(res=>{
      console.log(res.data.playlists);
      this.setState({
        movies:res.data.playlists
      })
    })
  }

}
export default App;
